<template>
    <div class="container">
        <!-- <div class="topnavbar">
            <div class="flex">
                <div class="flex-con">
                    <router-link class="ib" tag="div" :to="{path:'/sign'}">
                      <img src="../../assets/icons/album/points.png" alt="" class="topnavimg">
                    <div class="toptxt">签到积分</div>
                    </router-link>                    
                </div>
                <div class="flex-con">
                  <router-link class="ib" tag="div" :to="{path:'/redbag'}">
                    <img src="../../assets/icons/album/tthb.png" alt="" class="topnavimg">
                    <div class="toptxt">天天领红包</div>
                  </router-link>
                </div>
                <div class="flex-con">
                    <img src="../../assets/icons/album/game.png" alt="" class="topnavimg">
                    <div class="toptxt">有奖游戏</div>
                </div>
            </div>
        </div> -->
        
        <img src="../../assets/imgs/album/tiejia.png" alt="" class="tejia-img" @click="$router.push('/tj')"/>
        <img src="../../assets/icons/album/hbzq.png" alt="" class="hbzq-title">
        <!-- <div class="list-items">
            <img src="../../assets/imgs/album/img1.png" alt="" class="list-item">
            <img src="../../assets/imgs/album/img2.png" alt="" class="list-item">
            <img src="../../assets/imgs/album/img2.png" alt="" class="list-item">
        </div> -->
    </div>
</template>

<style lang="scss" scoped>
.topnavbar {
  padding: 0.4267rem 0 0.48rem 0;
  box-shadow: 0rem 0.04rem 0.2133rem 0rem rgba(0, 0, 0, 0.15);
  text-align: center;
  .topnavimg {
    width: 1.0933rem;
    height: 1.0933rem;
  }
  .toptxt {
    padding-top: 0.2667rem;
    font-size: 0.3467rem;
    color: #333333;
  }
}
.tejia-img {
  width: 100%;
  margin-top: 0.5rem;
}
.cx {
  padding: 0.5733rem 0.36rem 0 0.36rem;
  .cx-left {
    width: 4.6667rem;

    .cx-left-xsqq {
      width: 4.6133rem;
      background-color: #e5fcf4;
      height: 5.8133rem;
      padding-top: 0.5867rem;
      box-sizing: border-box;
      .xsqg-title-img {
        margin-left: 0.9733rem;
        width: 2.6667rem;
        display: block;
      }
      .time-left-str {
        text-align: center;
        margin-top: 0.32rem;
        text-align: center;
        justify-content: center;
        .time-str {
          width: 0.52rem;
          height: 0.64rem;
          line-height: 0.64rem;
          background-color: #000000;
          border-radius: 0.0533rem;
          color: #ffffff;
          font-size: 0.2933rem;
        }
        .time-seprator {
          width: 0.32rem;
          font-size: 0.2933rem;

          height: 0.64rem;
          line-height: 0.64rem;
        }
      }
      .xsqg-img {
        width: 3.0933rem;
        height: 1.4667rem;

        display: block;
        margin: 0 auto;
        margin-top: 0.5467rem;
      }
    }
  }
  .xsqg-goods-title {
    font-size: 0.36rem;
    color: #17402a;
    padding-top: 0.6533rem;
    text-align: center;
  }
  .cx-right-top {
    width: 4.5733rem;
    height: 2.8933rem;
    background-color: #d5e7f3;
    position: relative;
    .jrpt-img {
      width: 1.8933rem;
      height: 0.4933rem;
      margin-top: 0.5067rem;
      margin-left: 0.1067rem;
    }

    .group-img {
      position: absolute;
      width: 1.8933rem;
      height: 1.8933rem;
      top: 0.68rem;
      right: 0.3733rem;
    }
  }
  .cx-right-bottom {
    // width: 4.5733rem;
    width: 9.2rem;

    position: relative;
    // height: 2.8933rem;
    height: 4.1733rem;

    background-color: #f5ecdd;
    margin-top: 0.0267rem;
    .tjzc-img {
      // width: 1.8933rem;
      // height: 0.4933rem;

      width: 2.2rem;
      height: 0.56rem;

      margin-top: 0.5067rem;
      margin-left: 1.2267rem;
    }

    .group-goods-title {
      font-size: 0.2933rem;
      padding-top: 0.3333rem;
      color: #17402a;
    }
    .group-goods-desc {
      padding-top: 0.12rem;
      font-size: 0.2133rem;
      color: #17402a;
    }
    .group-goods-title {
      font-size: 0.4933rem;

      padding-left: 1.84rem;
      padding-top: 0.3333rem;
      color: #17402a;
      // width: 2.2667rem;
    }
    .group-goods-desc {
      font-size: 0.36rem;
      padding-left: 0.8rem;
      padding-top: 0.4rem;
      color: #17402a;
    }
    .tjzq-img {
      position: absolute;
      //     width: 0.7467rem;
      // height: 1.9867rem;
      width: 1.2533rem;
      height: 3.3333rem;
      top: 0.45rem;
      right: 1.5333rem;
    }
  }
}
.hbzq-title {
  margin-top: 0.4267rem;
  width: 100%;
  margin-bottom: 0.36rem;
}
.list-items {
  .list-item {
    width: 100%;
    margin-bottom: 0.32rem;
  }
}
</style>
